<!--管理-预算执行明细-->
<template>
  <div class="ManagerExecute-box h-full">
    <div class="h-full flex flex-col">
      <div class="bg-white p-8 mb-8">
        <filter-form
          ref="filterForm"
          :elements="elements"
          :noimmediate="true"
          :hand="true"
          @submit="submit"
          @reset="reset"
        >
          <template>
            <el-button icon="el-icon-download" :loading="downloadLoading" @click="downloadTemplateFun">导出</el-button>
          </template>
        </filter-form>
      </div>

      <div class="flex mb-8">
        <div
          v-for="(item, index) in types"
          :key="index"
          class="type"
          :class="{'is-active': currentType === item.code, [item.class]: true}"
          @click="currentType = item.code"
        >
          {{ item.title }}
        </div>
      </div>

      <div class="flex-1 overflow-hidden">
        <!--费用类-->
        <expense v-if="currentType === 'expense'" ref="expense" class="h-full" />

        <!--资产-->
        <assets v-if="currentType === 'assets'" ref="assets" class="h-full" />

        <!--业务量配套指标-->
        <business v-if="currentType === 'business'" ref="business" class="h-full" />
      </div>
    </div>
  </div>
</template>

<script>
import Expense from '@/pages/budgetQuert/ManagerExecute/expense'
import { getQuarter } from '@/utils/publicFun'
import { exportIndexList, exportManageAssetList, exportManageExpenseList, listYsDepartment } from '@/api/budgetQuert'
import Assets from '@/pages/budgetQuert/ManagerExecute/assets'
import Business from '@/pages/budgetQuert/ManagerExecute/business'
import filterMixins from '@/mixins/budgetQuert/filterMixins'
import exportDownload from '@/mixins/budgetQuert/exportDownload'

export default {
  name: 'ManagerExecute', // 管理-预算执行明细
  components: { Business, Assets, Expense },
  mixins: [filterMixins, exportDownload],
  data() {
    return {
      elements: [
        {
          label: '日期',
          type: 'date-picker',
          mode: 'monthrange',
          format: 'yyyy-MM',
          key: 'date',
          value: ''
        },
        {
          label: '院区',
          type: 'select',
          options: [
            { label: '三香', value: 1 },
            { label: '浒关', value: 2 }
          ],
          key: 'yard',
          value: ''
        },
        // {
        //   label: '部门',
        //   type: 'select',
        //   options: [],
        //   key: 'deptCode',
        //   itemValue: 'departmentCode',
        //   itemLabel: 'departmentName',
        //   value: ''
        // },
        {
          label: '综合搜索',
          type: 'input',
          placeholder: '请输入预算科目名称/预算科目编码',
          key: 'column',
          width: 270,
          value: ''
        }
      ],

      currentType: 'expense',
      types: [
        {
          title: '费用类',
          class: 'cost',
          code: 'expense'
        },
        {
          title: '资产类',
          class: 'property',
          code: 'assets'
        },
        {
          title: '业务量配套指标',
          class: 'target',
          code: 'business'
        }
      ]
    }
  },
  watch: {
    currentType() {
      this.submit()
    }
  },
  mounted() {
    const self = this
    const quarter = getQuarter('YYYY-MM')
    this.elements[0].value = [quarter.startTime, quarter.endTime]

    this.filterFun(listYsDepartment, 2, { manageStatus: 1 })

    setTimeout(function() {
      self.getInfo()
    }, 1000)
  },
  methods: {
    downloadTemplateFun() {
      let exportName = ''
      switch (this.currentType) {
        case 'expense':
          this.downloadInterface = exportManageExpenseList
          exportName = '管理预算执行明细-费用类'
          break
        case 'assets':
          this.downloadInterface = exportManageAssetList
          exportName = '管理预算执行明细-资产类'
          break
        case 'business':
          this.downloadInterface = exportIndexList
          exportName = '管理预算执行明细-业务量配套指标'
          break
      }

      const param = this.$refs.filterForm.getParms()

      if (param && param.date) {
        param.startTime = param.date[0]
        param.endTime = param.date[1]

        delete param.date
      }

      this.downloadTemplate(param, exportName)
    },

    submit(val) {
      const self = this
      setTimeout(() => {
        self.$refs[self.currentType].pagination.current = 1
        self.getInfo(val)
      })
    },

    getInfo(val) {
      const self = this
      setTimeout(() => {
        self.$refs[self.currentType].getData(val)
      })
    },

    reset() {
      const quarter = getQuarter('YYYY-MM')
      this.$refs.filterForm.handleForceSet({
        date: [quarter.startTime, quarter.endTime],
        yard: '',
        deptCode: '',
        column: ''
      })
      this.getInfo()
    },

    setCurrent(item) {
      this.currentType = item.code
    }
  }
}
</script>

<style lang="less" scoped>
.table-box{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.type{
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  margin-right: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  border: 2px solid transparent;
  transition: all .3s;
}

.is-active{
  border: 2px solid #2165f9;
}

.cost{
  background-color: #93d2f3;
}

.property{
  background-color: #e99d42;
}

.target{
  background-color: #81b337;
  margin-right: 0;
}

</style>
<style lang="less">
.ManagerExecute-box {
  .el-form-item--mini.el-form-item {
    margin-bottom: 5px;
  }
  .dialog-up-file {
    margin-bottom: 10px !important;
  }

  .el-form-item {
    margin-bottom: 0;
  }
}

.ck-dialog .ck-dialog-container {
  top: 0 !important;
}

.ck-dialog-container {
  max-width: 600px;
}
</style>
